<template>
  <list-page>
    <pub-search
      v-model:searchColumns="searchColumns"
      v-model:search-form="searchForm"
      mask-append-to="table-content"
      @search="search"
    >
      <template #leftBtn></template>
    </pub-search>
    <pub-table
      ref="pubTable"
      :column="columns"
      :data="tableData"
      :loading="tableLoading"
    >
      <template v-slot:option="scope">
        <el-button plain type="primary" @click="detail(scope.row.id)">
          详情
        </el-button>
      </template>
      <template v-slot:provinceName="scope">
        {{
          scope.row.provinceName +
          scope.row.cityName +
          scope.row.countyName +
          scope.row.streetName +
          scope.row.communityName
        }}
      </template>
      <template v-slot:assistants="scope">
        {{ formatZLY(scope.row.assistants) }}
      </template>
    </pub-table>
    <pub-pagination
      :total="pagination.total"
      v-model:page="pagination.page"
      v-model:limit="pagination.pageSize"
      @pagination="pagination.change"
    ></pub-pagination>
    <!-- 详情页 -->
    <pub-page-dialog-close v-model:show="isShow.detailShow">
      <detail-com :id="currentId"></detail-com>
    </pub-page-dialog-close>
  </list-page>
</template>

<script setup>
import { Plus } from '@element-plus/icons-vue'
import { useTable } from '@/hooks/UseTable'
import { get_rhbf_list } from '@/api/basicSetting.js'
import { ElMessage, ElMessageBox } from 'element-plus'
import detailCom from '@/view/RHBF/BFGL/components/detail.vue'
import { appCurrentState } from '@/pinia/modules/app'
const isShow = reactive({
  detailShow: false
})
const props = defineProps({
  id: {
    type: String,
    default: ''
  }
})
const currentId = ref('')
const searchColumns = ref([
  {
    label: '拜访日期',
    el: 'DateRange',
    bindBegin: 'visitDateBegin',
    bindEnd: 'visitDateEnd',
    defaultValue: ['', ''],
    labelWidth: 80
    // disabledDate: date => {
    //   return dayjs(date).isAfter(dayjs())
    // }
  }
])
const columns = ref([
  { label: '老人姓名', prop: 'elderName' },
  { label: '老人证件号码', prop: 'elderIdCard' },
  { label: '老人联系方式', prop: 'elderTel' },
  { label: '老人居住地址', prop: 'provinceName', slot: 'provinceName' },
  { label: '拜访日期', prop: 'visitDate' },
  {
    label: '拜访方式',
    prop: 'visitType',
    type: 'formatDict',
    formatCode: 'RHBF-BFFS'
  },
  { label: '助老员', prop: 'assistants', slot: 'assistants' },
  { label: '所属中心', prop: 'orgName' },
  { label: '操作', type: 'option', width: '80' }
])
let { tableData, search, getList, pagination, searchForm, tableLoading } =
  useTable(get_rhbf_list, { elderId: props.id })

const detail = id => {
  currentId.value = id
  isShow.detailShow = true
}

const formatZLY = arr => {
  console.log(arr)
  let val = JSON.parse(arr)
  let str = ''
  if (val && val.length > 0) {
    for (let i = 0; i < val.length; i++) {
      str += ((i == 0 ? '' : ',') + val[i].name )
    }
  }
  return str
}
const submitSuccess = val => {
  isShow[val] = false
  search()
}

onMounted(() => {
  getList()
})
</script>
<style lang="scss" scoped></style>
